<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <title>律师主页</title>
    <link rel="stylesheet" href="../../css/element.css">
    <link rel="stylesheet" href="../../css/base.css">
    <style>
        .el-divider__text {
            background: #eee;
        }
        .large_icon{
            font-size: 30px;
        }
        .mini_btn{
            font-size:5px
        }
        .message {
            padding: 5px;
            margin: 5px;
            border-radius: 5px;
        }
        .user-message {
            background-color: #c6f6f8;
            text-align: left;
        }
        .system-message {
            background-color: #89e886;
            text-align: right;
        }
        .message_input{
            border: 2px solid #cccccc;
            padding: 8px;
            bottom: 30px;
            width: 80%;
            height: 30px;
            border-radius: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div id="wrapper" v-cloak>
    <el-divider content-position="left">数据概览</el-divider>
    <el-row :gutter="10" style="padding: 5px 0">
        <el-col :span="6">
            <el-card style="padding: 10px">
                <div style="display: inline-block; padding-right: 20px; vertical-align: middle;">
                    <i class="el-icon-user-solid large_icon" ></i>
                </div>
                <div style="display: inline-block; padding-left: 40px; vertical-align: middle;">
                    <div style="color: #455a64; font-size: 24px; padding-bottom: 5px">{{ counts.lawyerCount }}</div>
                    <div style="color: #99abb4;">律师总数</div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card style="padding: 10px">
                <div style="display: inline-block; padding-right: 20px; vertical-align: middle;">
                    <i class="el-icon-s-order large_icon"></i>
                </div>
                <div style="display: inline-block; padding-left: 40px; vertical-align: middle;">
                    <div style="color: #455a64; font-size: 24px; padding-bottom: 5px">{{ counts.count1 }}</div>
                    <div style="color: #99abb4;">【法律援助】待处理</div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card style="padding: 10px">
                <div style="display: inline-block; padding-right: 20px; vertical-align: middle;">
                    <i class="el-icon-s-flag large_icon"></i>
                </div>
                <div style="display: inline-block; padding-left: 40px; vertical-align: middle;">
                    <div style="color: #455a64; font-size: 24px; padding-bottom: 5px">{{ counts.count2 }}</div>
                    <div style="color: #99abb4;">【法院援助】已处理</div>
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card style="padding: 10px">
                <div style="display: inline-block; padding-right: 20px; vertical-align: middle;">
                    <i class="el-icon-s-comment large_icon"></i>
                </div>
                <div style="display: inline-block; padding-left: 40px; vertical-align: middle;">
                    <div style="color: #455a64; font-size: 24px; padding-bottom: 5px">{{ counts.count3 }}</div>
                    <div style="color: #99abb4;">消息记录</div>
                </div>
            </el-card>
        </el-col>
    </el-row>


    <el-row :gutter="10">
        <el-col :span="12">
            <el-card>
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="main" style="width: 100%;height:400px; margin: 0 auto"></div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card>
                <div slot="header" class="clearfix">
                    <h3>在线 回复</h3>
                </div>

                <el-collapse accordion v-model="active">
                    <el-collapse-item :name="name" v-for="(items ,name) in messages" :key="name">
                        <template slot="title">
                            <b>【{{ name }}】向您发起了聊天咨询......</b>
                            <el-button @click="openDrawer(name,items)" type="warning" size="mini" style="margin-left: 16px;">
                                回复
                            </el-button>
                        </template>
                        <div style="padding: 0 20px" v-for="(message,index) in items">
                            <p v-if="message.messageFromUser">【{{name}}】:{{ message.messageFromUser }}</p>
                            <p v-if="message.messageFromLawyer">【您】:{{ message.messageFromLawyer }}</p>
                            <span style="margin-left: 50px; color: #888">{{ message.createTime }}</span>
                        </div>
                    </el-collapse-item>
                </el-collapse>

                <el-drawer
                        title="回复消息"
                        :visible.sync="drawer"
                        :direction="direction"
                        :before-close="handleClose"
                        size="auto"
                        width="80%">
                    <div v-for="(message, index) in chatMessages" :key="index" >
                        <p v-if="message.messageFromUser" class="message user-message">
                            {{selectedName}}<br>
                            {{message.createTime}}<br>
                            {{ message.messageFromUser }}
                        </p>
                        <p v-if="message.messageFromLawyer" class="message system-message">
                            【律师】{{message.lawyerName}}<br>
                            {{message.createTime}}<br>
                            {{ message.messageFromLawyer }}
                        </p>
                    </div>
                    <input type="text" v-model="newMessage" @keyup.enter="sendMessage()" class="message_input"  placeholder="请输入要咨询的问题" >
                </el-drawer>
            </el-card>
        </el-col>


    </el-row>

</div>

<script src="../../js/echarts.min.js"></script>
<script src="../../js/china.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>


<script>
    const pieOption = {
        title: {text: '律师男女人数比例'},
        tooltip: {trigger: 'item'},
        legend: {top: '0', left: 'right'},
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['40%', '70%'],
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                data: []
            }
        ]
    };



    new Vue({
        el: "#wrapper",
        data: {
            active: 0,
            users: [],
            roles: [],
            permissions: [],
            notices: [],
            user: {},
            tableData: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            dialogFormVisible: false,
            entity: {},
            isCollapse: false,
            drawer: false,
            direction: 'ttb',
            messages:{},
            selectedName: '', // 存储当前选中的对话者姓名
            replyContent: '', // 存储回复内容
            chatMessages:[], //存储聊天记录
            newMessage:'',   //新的消息
            ws: null, //websocket对象
            counts:{}
        },
        mounted() {
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
            this.load();
        },
        methods: {
            load() {
                $.get("/api/consultationRecord/lawyer").then((res) => {
                    console.log(res.data)
                    this.messages = res.data;
                })

                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('main'));

                $.get("/api/statistics").then(res=>{
                    console.log(res.data)
                    this.counts = res.data
                    pieOption.series[0].data.push({name: "男", value: this.counts.male})
                    pieOption.series[0].data.push({name: "女", value: this.counts.female})
                    myChart.setOption(pieOption);
                })
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            logout() {
                $.get("/api/user/logout");
                sessionStorage.removeItem("user");
                location.href = "/page/end/login.html";
            },
            handleClose(done) {
                done();
            },
            openDrawer(name,messages) {
                this.selectedName = name; // 将选中的对话者姓名存储起来
                this.chatMessages = messages;
                console.log(this.chatMessages)
                this.drawer = true; // 打开抽屉
                this.connectWebSocket();
            },
            connectWebSocket() {
                this.ws = new WebSocket('ws://localhost:9999/api/message/'+this.user.username);

                this.ws.onopen = () => {
                    console.log('WebSocket connected');
                };

                this.ws.onmessage = (event) => {
                    // 处理收到的消息
                    console.log(event)
                    console.log(JSON.parse(event.data));
                    this.chatMessages.push(JSON.parse(event.data));
                    console.log("this.chatmessages：",this.chatMessages)
                };

                this.ws.onclose = () => {
                    console.log('WebSocket disconnected');
                };
            },

            //发送消息
            sendMessage() {
                if (this.newMessage.trim() !== '') {
                    console.log("newMessage",this.newMessage)
                    //console.log("this.lawyer",this.lawyer)
                    console.log("this.user",this.user)
                    this.message = {messageFromLawyer:this.newMessage,lawyerId:this.user.lawyerUuid,lawyerName:this.user.username,userId:this.chatMessages[0].userId,userName:this.chatMessages[0].userName}
                    this.chatMessages.push(this.message);
                    // 保存入库
                    this.save()
                    // 模拟系统回复
                    // setTimeout(() => {
                    //     this.chatMessages.push({ text: 'Your message is received.', sender: 'system' });
                    // }, 500);
                    this.newMessage = '';
                    this.message = {};
                   // this.drawer = false;
                }
            },
            save() {
                $.ajax({
                    url: "/api/consultationRecord/",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(this.message)
                }).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            message: "消息发送成功",
                            type: "success"
                        });
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        })
                    }
                   // this.loadData();
                })
            },
        }
    })
</script>
</body>
</html>
